<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script type="text/javascript">
	function a_click(m) {
		var st = document.getElementsByClassName("add");
		var divst = document.getElementsByClassName("add_sub_content");
		for (var k = 0; k < st.length; k++) {
			if (k != m) {
				divst[k].style.display = "none";
			} else {
				divst[k].style.display = "block";
			}
		}
	}
</script>

<div class="address content" style="display:none">
	<div class="subnav">
		<div class="nav_content">
			<ul>
				<li class="add"><a href="javascript:void(0);"
					onclick="a_click(0);">导入通讯录</a></li>
				<li class="add"><a id='manageAddress'
					href="javascript:void(0);" onclick="a_click(1);getAddressData();">管理通讯录</a></li>
				<li class="add"><a href="javascript:void(0);"
					onclick="a_click(2);getAddressHistory();">历史记录</a></li>
			</ul>
		</div>
	</div>
	<!--导入通讯录部分开始-->
	<div class="sub_content add_sub_content">
		<div class="sub_add_button">
			<div class="import">
				<form id="importForm" name="importForm"
					enctype="multipart/form-data">
					选择文件:<input id="file" type="file"
						accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
						name="file" onchange="checkfile(this);"> <input
						id="sum_but" class="sum_but" type="button" value="提交">
				</form>
				<script type="text/javascript">
					function checkfile(sender) {
						var validExts = new Array(".xlsx", ".xls");
						var fileExt = sender.value;
						if (fileExt == "") {
							return false;
						}
						fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
						if (validExts.indexOf(fileExt) < 0) {
							alert("文件类型应为xls或xlsx");
							document.importForm.file.value = "";
							document.importForm.file.focus();
							return false;
						} else
							return true;
					}
					$('#sum_but')
							.click(
									function() {
										var file = document
												.getElementById("file");
										if (file.value == "") {
											alert("请先上传文件");
											return;
										}
										var previewOptions = {
											url : '${pageContext.request.contextPath}/fileUpload/upload',
											type : 'POST',
											dataType : 'json',
											success : function(result) {
												if (result.success) {
													showImportList(result.addrList);
												} else {
													alert(result.msg);
												}
											},
											iframe : false
										};
										$('#importForm').ajaxSubmit(
												previewOptions);
										return false;
									});
				</script>
			</div>
			<div class="download">
				<input type="button" class="down_but"
					onclick="location='${pageContext.request.contextPath}/excel/template.xlsx'"
					value="下载模板" />
			</div>
		</div>
		<div id="import" class="sub_add_list">
			<script type="text/javascript">
				var height = document.body.clientHeight - 233 - 160;
				document.getElementById('import').style.height = height + 'px';
			</script>
			<script type="text/javascript">
				function showImportList(list) {
					if (document.getElementById('nodata')) {
						document.getElementById('nodata').style.display = "none";
					}
					var d = document.getElementById('import');
					var html = "<table><tr><td width=100>姓名</td><td width=150>电话号码</td><td width=100>分组名</td><td width=150x>备注</td></tr>";
					for (var i = 0; i < list.length; i++) {
						html += "<tr><td>" + list[i].name + "</td><td>"
								+ list[i].phoneNumber + "</td><td>"
								+ list[i].groupName + "</td><td>"
								+ list[i].remark + "</td></tr>";
					}
					html += "</table>";
					document.getElementById('importData').innerHTML = html;
				}
			</script>
			<div id="importData"></div>
			<div id="nodata">暂无数据</div>
		</div>
	</div>
	<div></div>
	<!--导入通讯录部分结束-->
	<!--管理通讯录部分开始-->
	<script type="text/javascript">
		function getAddressData() {
			$.ajax({
				type : "POST",
				url : "${pageContext.request.contextPath}/data/getAddress",
				datatype : "json",
				success : function(data) {
					if (data.success) {
						showAddressList(data.addressDataList);
						initSelectValue(data.addressDataList);
						changeWindow('sub_man_but1');
					}
				},
				error : function() {
					alert('操作异常');
					return;
				}
			});
		}
		function showAddressList(list) {
			var left_div = document.getElementById('left_group');
			left_div.innerHTML = '';
			var right_div = document.getElementById('right_group');
			right_div.innerHTML = '';
			var left_ul = document.createElement('ul');
			var all_li = document.createElement('li');
			all_li.className = 'left_li';
			all_li.setAttribute('onMouseDown', 'down(this)');
			all_li.style.backgroundColor = '#dfe9ea';
			var all_checkBox = document.createElement('input');
			all_checkBox.setAttribute('type', 'checkbox');
			all_checkBox.setAttribute('value', 'all');
			all_checkBox.style.margin = '6px';
			all_checkBox.setAttribute('class', 'cbox');
			all_li.appendChild(all_checkBox);

			var all_a = document.createElement('a');
			all_a.href = 'javascript:void(0)';
			all_a.setAttribute('onclick', 'openAll("oneGroup")');
			all_a.innerHTML = '全部';
			all_li.appendChild(all_a);
			left_ul.appendChild(all_li);
			left_div.appendChild(left_ul);
			for (var i = 0; i < list.length; i++) {
				var left_li = document.createElement('li');
				left_li.className = 'left_li';
				left_li.setAttribute('onMouseDown', 'down(this)');
				var left_checkBox = document.createElement('input');
				left_checkBox.setAttribute('type', 'checkbox');
				left_checkBox.setAttribute('value', list[i].pkId);
				left_checkBox.style.margin = '6px';
				left_checkBox.setAttribute('class', 'cbox');
				left_li.appendChild(left_checkBox);

				var left_a = document.createElement('a');
				left_a.href = 'javascript:void(0)';
				left_a.setAttribute('onclick', 'openShutManager("oneGroup","'
						+ list[i].pkId + 'r")');
				left_a.innerHTML = list[i].groupName;
				left_a.setAttribute('id', list[i].pkId);
				left_li.appendChild(left_a);
				left_ul.appendChild(left_li);

				var rList = list[i].addressList;
				var right_ul = document.createElement('ul');
				right_ul.setAttribute('id', list[i].pkId + 'r');
				right_ul.setAttribute('class', 'oneGroup');
				right_div.appendChild(right_ul);
				for (var j = 0; j < rList.length; j++) {
					var right_li = document.createElement('li');

					var right_checkBox = document.createElement('input');
					right_checkBox.setAttribute('type', 'checkbox');
					right_checkBox.setAttribute('value', rList[j].pkId);
					right_checkBox.style.margin = '2px';
					right_checkBox.setAttribute('class', 'rbox');
					right_li.appendChild(right_checkBox);

					var right_a = document.createElement('a');
					right_a.href = 'javascript:void(0)';
					var span1 = document.createElement('span');
					span1.className = 'right_a_name';
					span1.innerHTML = rList[j].name;
					var span2 = document.createElement('span');
					span2.className = 'right_a_phone';
					span2.innerHTML = rList[j].phoneNumber;

					right_a.appendChild(span1);
					right_a.appendChild(span2);
					right_a.setAttribute('id', rList[j].pkId);
					right_li.appendChild(right_a);
					right_ul.appendChild(right_li);
				}
			}
			var add_li = document.createElement('li');
			var add_a = document.createElement('a');
			add_a.href = 'javascript:void(0)';
			add_a
					.setAttribute('onclick',
							'openWindow("bc","add_input_value");');
			add_a.innerHTML = '添加分组';
			add_li.appendChild(add_a);
			left_ul.appendChild(add_li);
		}
		function down(obj) {
			var os = document.getElementsByClassName('left_li');
			for (var i = 0; i < os.length; i++) {
				os[i].style.backgroundColor = '';
			}
			obj.style.backgroundColor = '#dfe9ea';
		}
	</script>
	<div class="sub_content add_sub_content" style="display:none">
		<div id="sub_man_but1" class="sub_man_but">
			<button id="add" onclick="openWindow('bc','ct')">增加</button>
			<button id="delete" onclick="changeWindow('sub_man_but2')">删除</button>
			<button id="move" onclick="changeWindow('sub_man_but3')">移动</button>
		</div>
		<div id="sub_man_but2" class="sub_man_but" style="display:none;">
			<button onclick="del_confirm();">确定</button>
			<button onclick="changeWindow('sub_man_but1')">取消</button>
			<script type="text/javascript">
				function del_confirm() {
					var r = confirm("确认删除？");
					if (r == true) {
						var cbox = document.getElementsByClassName('cbox');
						var cstr = "";
						for (var i = 0; i < cbox.length; i++) {
							if (cbox[i].checked == true) {
								cstr += cbox[i].value + ",";
							}
						}
						if (cstr != "") {
							cstr = cstr.substr(0, cstr.length - 1);
						}
						var rbox = document.getElementsByClassName('rbox');
						var rstr = "";
						for (var i = 0; i < rbox.length; i++) {
							if (rbox[i].checked == true) {
								rstr += rbox[i].value + ",";
							}
						}
						if (rstr != "") {
							rstr = rstr.substr(0, rstr.length - 1);
						}
						$
								.ajax({
									type : "POST",
									url : "${pageContext.request.contextPath}/addressGroup/delete",
									datatype : "json",
									data : {
										"groupIds" : cstr,
										"addressIds" : rstr
									},
									success : function(data) {
										if (data.success) {
											document.getElementById(
													'manageAddress').click();
										} else {
											alert('操作异常');
										}
									},
									error : function() {
										alert('操作异常');
										window.location.href = '${pageContext.request.contextPath}/redirect/login';
										return;
									}
								});
					}
				}
			</script>
		</div>
		<div id="sub_man_but3" class="sub_man_but" style="display:none;">
			<button onclick="openMove();">移动至..</button>
			<div id="moveT" class="open-window">
				<div>
					<label>选择分组：</label> <select id="moveTo">
					</select>
				</div>
				<div>
					<button onclick="move_comfirm();">确定</button>
					<button onclick="closeWindow('bc','moveT');">取消</button>
				</div>
			</div>

			<button onclick="changeWindow('sub_man_but1')">取消</button>
			<script type="text/javascript">
				function openMove() {
					var rbox = document.getElementsByClassName('rbox');
					var flag = true;
					for (var i = 0; i < rbox.length; i++) {
						if (rbox[i].checked == true) {
							flag = false;
						}
					}
					if (flag) {
						alert('没有选中的通讯录');
						return;
					}
					openWindow('bc', 'moveT');
				}
				function move_comfirm() {
					var rbox = document.getElementsByClassName('rbox');
					var rstr = "";
					for (var i = 0; i < rbox.length; i++) {
						if (rbox[i].checked == true) {
							rstr += rbox[i].value + ",";
						}
					}
					var groupId = document.getElementById('moveTo').value;
					if (rstr != "") {
						rstr = rstr.substr(0, rstr.length - 1);
					}
					$
							.ajax({
								type : "POST",
								url : "${pageContext.request.contextPath}/address/move",
								datatype : "json",
								data : {
									"addressIds" : rstr,
									"groupId" : groupId
								},
								success : function(data) {
									if (data.success) {
										closeWindow('bc', 'moveT');
										document
												.getElementById('manageAddress')
												.click();
									} else {
										alert('操作异常');
									}
								},
								error : function() {
									alert('操作异常');
									window.location.href = '${pageContext.request.contextPath}/redirect/login';
									return;
								}
							});
				}
			</script>

		</div>
		<div id="sub_man_list" class="sub_man_list">
			<script type="text/javascript">
				var height = document.body.clientHeight - 233 - 110;
				document.getElementById('sub_man_list').style.height = height
						+ 'px';
			</script>
			<div id="left_group"></div>
			<div id="right_group"></div>
		</div>
		<script type="text/javascript">
			//===========================点击展开关闭效果====================================  
			function openShutManager(oSourceObj, oTargetObj) {
				var targetObj = typeof oTargetObj == "string" ? document
						.getElementById(oTargetObj) : oTargetObj;
				var ulList = document.getElementsByClassName(oSourceObj);
				for (var i = 0; i < ulList.length; i++) {
					ulList[i].style.display = 'none';
				}
				targetObj.style.display = 'block';
			}
			function openAll(oSourceObj) {
				var ulList = document.getElementsByClassName(oSourceObj);
				for (var i = 0; i < ulList.length; i++) {
					ulList[i].style.display = 'block';
				}
			}
			function closeWindow(targetObj, sourceObj) {
				document.getElementById(targetObj).style.display = 'none';
				document.getElementById(sourceObj).style.display = 'none';
			}
			function openWindow(targetObj, sourceObj) {
				document.getElementById(targetObj).style.display = 'block';
				document.getElementById(sourceObj).style.display = 'block';
			}
			function changeWindow(targetObj) {
				var v = document.getElementsByClassName('sub_man_but');
				for (var i = 0; i < v.length; i++) {
					v[i].style.display = 'none';
				}
				document.getElementById(targetObj).style.display = 'block';
				if (targetObj == 'sub_man_but1') {
					$(".cbox").css("display", "none");
					$(".rbox").css("display", "none");
					var cbox = document.getElementsByClassName('cbox');
					for (var i = 0; i < cbox.length; i++) {
						cbox[i].checked = false;
					}
					var rbox = document.getElementsByClassName('rbox');
					for (var i = 0; i < rbox.length; i++) {
						rbox[i].checked = false;
					}
				}
				if (targetObj == 'sub_man_but2') {
					$(".cbox").css("display", "block");
					$(".rbox").css("display", "block");
				}
				if (targetObj == 'sub_man_but3') {
					$(".rbox").css("display", "block");
				}
			}
		</script>
	</div>
	<!--管理通讯录部分结束-->
	<!--通讯录历史记录部分开始-->
	<div class="sub_content add_sub_content" style="display:none">
		<div class="p_history">
			<ul id="addr_his_li">
			</ul>
		</div>
		<script type="text/javascript">
			function getAddressHistory() {
				$
						.ajax({
							type : "POST",
							url : "${pageContext.request.contextPath}/historyAddress/getAll",
							datatype : "json",
							success : function(data) {
								if (data.success) {
									var html = '';
									var list = data.list;
									for (var i = 0; i < list.length; i++) {
										html += '<li>'
												+ formatDate(list[i].createTime)
												+ ' ' + list[i].content
												+ '</li>';
									}
									document.getElementById('addr_his_li').innerHTML = html;
								} else {
									alert('操作异常');
								}
							},
							error : function() {
								alert('操作异常');
								window.location.href = '${pageContext.request.contextPath}/redirect/login';
								return;
							}
						});
			}
		</script>
	</div>
	<!--通讯录历史记录部分结束-->
	<div class="clear"></div>
</div>
<!--增加通讯录名单弹出框部分开始-->
<div id="bc" class="delete_alert_bc"></div>
<div id="ct" class="delete_alert_ct">
	<div>
		<label> 姓名：</label><input id="addressName" type="text" /><br /> <label>号码：</label><input
			id="phoneNumber" type="text" /><br /> <label>分组：</label> <select
			id="groupId">
		</select>
	</div>
	<div>
		<button onclick="addAddress();">确定</button>
		<button onclick="closeWindow('bc','ct');">取消</button>
	</div>
	<script type="text/javascript">
		function addAddress() {
			var addressName = document.getElementById('addressName');
			var phoneNumber = document.getElementById('phoneNumber');
			var groupId = document.getElementById('groupId');
			var anValue = addressName.value;
			var pnValue = phoneNumber.value;
			var giValue = groupId.value;
			if (anValue == '') {
				alert('请输入姓名');
				return;
			}
			if (pnValue == '') {
				alert('请输入号码');
				return;
			}
			if (!isPhoneNumber(pnValue)) {
				alert('请输入11位长度的有效号码');
				return;
			}
			$
					.ajax({
						type : "POST",
						url : "${pageContext.request.contextPath}/address/add",
						data : {
							'addressName' : anValue,
							'phoneNumber' : pnValue,
							'groupId' : giValue
						},
						datatype : "json",
						success : function(data) {
							if (data.success) {
								closeWindow('bc', 'ct');
								addressName.value = '';
								phoneNumber.value = '';
								document.getElementById('manageAddress')
										.click();
							} else {
								alert(data.msg);
							}
						},
						error : function() {
							alert('操作异常');
							window.location.href = '${pageContext.request.contextPath}/redirect/login';
							return;
						}
					});
		}
		function initSelectValue(list) {
			var select = document.getElementById('groupId');
			for (var i = 0; i < list.length; i++) {
				select[i] = new Option(list[i].groupName, list[i].pkId);
			}
			var moveTo = document.getElementById('moveTo');
			for (var i = 0; i < list.length; i++) {
				moveTo[i] = new Option(list[i].groupName, list[i].pkId);
			}
		}
	</script>
</div>
<!--增加通讯录名单弹出框部分结束-->
<!--添加分组名开始-->
<div class="open-window" id="add_input_value">
	<div>
		<label>分组名：</label> <input id="input_val" class="add_input_style"
			type="text" />
	</div>
	<div>
		<button onclick="addGroup();">确定</button>
		<button onclick="closeWindow('bc','add_input_value');">取消</button>
	</div>
	<script type="text/javascript">
		function addGroup() {
			var v = document.getElementById('input_val');
			var value = v.value;
			if (value == '') {
				alert('请输入分组名');
				return;
			}
			$
					.ajax({
						type : "POST",
						url : "${pageContext.request.contextPath}/addressGroup/add",
						data : {
							'groupName' : value
						},
						datatype : "json",
						success : function(data) {
							if (data.success) {
								closeWindow('bc', 'add_input_value');
								v.value = '';
								document.getElementById('manageAddress')
										.click();
							} else {
								alert(data.msg);
							}
						},
						error : function() {
							alert('操作异常');
							window.location.href = '${pageContext.request.contextPath}/redirect/login';
							return;
						}
					});
		}
	</script>
</div>